<template>
  <section class="mobile-research-result-page">
    <van-sticky offset-top="0.54rem">
      <van-search v-model="title" placeholder="请输入搜索关键词"   @search="onSearch">
      </van-search>
      <van-dropdown-menu>
        <van-dropdown-item v-model="typeId" :options="typeList" @change="onChangeMenu">
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
      class="list-box"
    >
      <div class="item-box" v-for="item in pannelList" :key="item.id" @click="handleView(item.id)">
        <img class="item-cover" :src="item.headUrl">
        <p class="item-title text-line-two">{{ item.title }}</p>
        <div class="item-info">
          <span v-if="item.newsTypeName" class="item-tag">{{item.newsTypeName}}</span>
          <span v-if="item.releaseTime" class="item-time">{{ item.releaseTime }}</span>
          <!-- <span>数据平台</span> -->
        </div>
      </div>
    </van-list>
  </section>
</template>

<script>
// import Vue from 'vue'
import 'vue-mini-player/lib/vue-mini-player.css';
import { formatTime } from '@/utils/utils';
import { geStudentNewsStudyInfoPage, getStudentNewsStudyRanking, getStudentNewsStudyType } from '@/request/api';
// import { Search, DropdownMenu, DropdownItem, Sticky, List, Popup } from 'vant';
// Vue.use(Search);
// Vue.use(DropdownMenu);
// Vue.use(DropdownItem);
// Vue.use(Sticky);
// Vue.use(List);
// Vue.use(Popup);
const TYPE = 2;
export default {
  // 组件名称
  name: "researchResultMobile",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
  },
  // 组件状态值
  data() {
    return {
      title: '',
      value1: 0,
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      typeList: [],
      typeId: '',
      pannelList: [],
      list: [],
      loading: true,
      finished: false,
      total: 0,
      showEmpty: false,
    };
  },
  created() {
    this.getStudentNewsStudyType()
  },
  // 组件方法
  methods: {
    onLoad() {
      this.getList()
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },

    async getList() {
      this.loading = true;
      const { code, data } = await geStudentNewsStudyInfoPage({
        title: this.title,
        pageNo: 1,
        pageSize: 6, // 首页显示最多6条
        type: TYPE,
        typeId: this.typeId > 0 ? this.typeId : ''
      });
      if (code !== 0) {
        this.pannelList = [];
        this.loading = false;
        this.finished = true;
      }
      // 加载状态结束
      this.loading = false;
      // this.total = data.total;
      this.pannelList = data.list.map(v => {
        return {
          ...v,
          releaseTime: formatTime(new Date(v.releaseTime))
        }
      });
      // this.pannelList.push(...this.pannelList)
      this.finished = true;
      // 数据全部加载完成
      // if (this.pannelList.length >= data.total) {
      //   this.finished = true;
      // }
    },
    async getStudentNewsStudyType() {
      const { code, data } = await getStudentNewsStudyType({
        type: TYPE
      });
      if (code !== 0) {
        this.list = [];
        return;
      }
      this.typeList = [
        {
          id: 0,
          name: '全部'
        },
        ...data
      ];
      this.typeList.map((v) => {
        v.text = v.name
        v.value = v.id
      })
      this.typeId = 0;
      this.getList();
      console.log('this.typeList', this.typeList)
    },
    onChangeMenu() {
      this.finished = false
      this.getList();
    },
    onSearch() {
      this.finished = false
      this.getList();
    },
    //判断当前所在环境
    testBrowser () {
        let ismo = false
        let ua = window.navigator.userAgent.toLowerCase()
        console.log(ua)
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
            wx.miniProgram.getEnv((res) => {
            console.log(res)
            if (res.miniprogram) {
                // 在小程序
                console.log('在小程序')
                ismo = true
            } else {
                //在微信里
                console.log('在微信里')
                ismo = false
            }
            })
        } else {
            console.log('不在微信里面')
            ismo = false

            // 不在微信里面
        }
        return ismo
    },
    handleView(id) {
        this.$message.warning('请在PC端操作')
    //   const isWXscx = this.testBrowser()
    //   if (isWXscx) {
    //     this.$message.warning('请在PC端操作')
    //   } else {
    //     this.$router.push({
    //         path: '/searchResultDetail/search',
    //         query: { id },
    //     });
    //   }
    },
  },
  beforeDestroy() {
  }
};
</script>
<style lang="less">
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #4677B9;
}
</style>
<style lang="less" scoped>
.mobile-research-result-page {
  display: none;
  position: relative;
  width: 100vw;
  background-color: #fff;
  * {
    box-sizing: border-box;
  }
  .text-line-two {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  ::v-deep .van-search {
    padding: 0.1rem;
    .van-search__content {
      border: 1px solid #F0F0F0;
      border-radius: 2px;
      background-color: #fff;
    }
  }
  ::v-deep .van-sticky {
    z-index: 2;
  }
  ::v-deep .van-dropdown-menu {
    border: 1px solid #F0F0F0;
    border-left: 0;
    border-right: 0;
    .van-dropdown-menu__bar {
      height: 0.45rem;
      box-shadow: none;
    }
    .van-dropdown-menu__title {
      font-size: 0.14rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597A0;
      line-height: 0.2rem;
    }
    .van-dropdown-item__content {
      border-top: 1px solid #F0F0F0;
    }
  }
  .item-box {
    position: relative;
    padding: 0.12rem 0.1rem;
    padding-left: 0.74rem;
    overflow: hidden;
    &::after {
      position: absolute;
      bottom: 0;
      left: 0.1rem;
      z-index: 1;
      width: calc(100% - 0.2rem);
      height: 1px;
      background-color: #E6E6E6;;
      opacity: .6;
      content: "";
    }
  }
  .item-cover {
    position: absolute;
    top: 0.12rem;
    left: 0.1rem;
    width: 0.55rem;
    height: 0.72rem;
    object-fit: contain;
  }
  .item-title {
    margin-bottom: 0.11rem;
    font-size: 0.15rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383D;
    line-height: 0.21rem;
    min-height: 0.42rem;
  }
  .item-info {
    display: flex;
    align-items: center;
    font-size: 0.12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597A0;
    line-height: 0.17rem;
  }
  .item-tag {
    margin-right: 0.09rem;
    padding: 0 0.05rem;
    font-size: 0.1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2F8EFE;
    line-height: 0.19rem;
    border: 1px solid #2F8EFE;
    border-radius: 0.04rem;;
    background: rgba(47,142,254,0.07);
  }
  .item-time {
    margin-right: 0.05rem;
  }
}
</style>
